/* public css */
body{
	background: #fff;
}
.pic-box{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.pic-box img{
	width: 100%;
	height: auto;
}
.box-width{
	width: 95%;
	margin:0 auto
}
.contain-wrapper{
	width:100%;
	overflow: hidden;
}
.container-box{
	width:100%;
	padding: 20rem 0;
	position: relative;
	background: #fff;
	background-size: cover;
	background-position: center;
}
.container-title{
	width: 100%;
	font-size: 25rem;
	color: #000;
	font-weight: 600;
	margin: 0 auto;
	padding-left: 30rem;
}
.main-box{
	width: 95%;
	margin: 0 auto;
}
.right,.left{
    width: 100%;
}
/* public css end */
header{
	width: 100%;
	position: relative;
	background: #ffffff;
	z-index: 99;
	top: 0;
	left: 0;
	height: 60rem;
}
.header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rem;
	display: none;
}
.header .logobox{
	width: auto;
	height: 80%;
	display: flex;
	align-items: center;
}
.header .logobox p{
	font-size: 40rem;
	font-weight: bold;
	margin-left: 10rem;
	color: #1d1f88;
	letter-spacing: 5rem;
}
.header .logobox .pic-box{
	height:100%;
	width:auto;
	border-radius: 10rem;
	/* box-shadow: 0 0 5rem #fff; */
}
.header .logobox .pic-box img{
	height:100%;
	width:auto;
}
.header .headnav{
	width: 50%;
	display: flex;
	justify-content: space-between;
	height: 100%;
}
.header .headnav>li{
	width: 17%;
	line-height: 100rem;
	height: 100%;
	text-align: center;
	font-size: 20rem;
	color: #000;
}
.header .headnav>li:hover,
.header .headnav>li.active{
	color: #e60212;
	border-bottom:5rem #e60212 solid;
}
.header .headnav a{
	width: 100%;
	height: 100%;
	display: block;
}
.header .subnav>li:hover{
	background: #8293a5;
	color: #fff;
}
.header .subnav{
	display:none;
	color: #000;
	background: #e1e1e1;
	line-height: 60rem;
	font-size: smaller;
}
.header .headnav>li:hover .subnav{
	display:block;
}
.mlangchange:hover .searchbox{
	display:block;
	animation: opashow 0.5s ease forwards;
}
@keyframes opashow{
	from{opacity:0}
	to{
		opacity:1;
	}
}
.searchbox{
	position:fixed;
	width:100%;
	left:0;
	background:0;
	top: 60rem;
	background:#fff;
	padding:10rem 0;
	display:none;
	z-index: 999;
	opacity:0;
}
.searchbox form{
	width: 80%;
	line-height: 40rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 25rem;
	border: 1rem #ccc solid;
	padding: 5rem 10rem;
	margin:0 auto;
}
.searchbox form button{
	background: #fff;
}
.searchbox img{
	width: 15rem;
	margin-right: 10rem;
}
.searchbox input{
	font-size: 15rem;
	border: none;
	background: none;
	color: #000;
	width: 200rem;
	padding: 0;
}
/* banner */
.banner{
	width: 100%;
	overflow: hidden;
	position: relative;
	--swiper-pagination-color: #1d252d;
	--swiper-navigation-color: #1d252d;/* 单独设置按钮颜色 */
	--swiper-navigation-size: 25rem;/* 设置按钮大小 */
}
.banner .swiper-pagination{
	bottom: 10rem!important;
}
.banner .swiper-pagination span{
	width: 10rem;
	height: 10rem;
}
/* product css */
.proshow{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	color: #000;
	margin-top: 15rem;
}
.proshow .showbox{
	width: 100%;
	/* border: 3rem #91919100 solid; */
	padding: 20rem;
	position: relative;
	overflow: hidden;
	background-position: center;
	background-size:cover;
	box-shadow: 0 0 8rem #0000008a;
	margin-bottom: 30rem;
}
.proshow .showbox:nth-child(1){
	background-image: url(../images/propic3.jpg);
}
.proshow .showbox:nth-child(2){
	background-image: url(../images/propic2.jpg);
}
.proshow .showbox:nth-child(3){
	background-image: url(../images/propic12.jpg);
}
.proshow .showbox:before{
	background-image:url(../images/proincon.png);
	position:absolute;
	top:0;
	right:0;
	width: 200rem;
	height: 300rem;
	content:'';
	background-size:cover;
	opacity: 0.5;
	z-index: 10;
}
.proshow .showbox:after{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	content:'';
	background: linear-gradient(45deg, #575ac9d4, #a1a1a166);
	background: #ffffffe6;
	z-index:1;
}
.proshow .showbox:nth-child(2):before{
	top: -60rem;
	right:0;
	width: 200rem;
	height: 300rem;
}
.proshow .showbox:nth-child(3):before{
	top: -120rem;
	right: 0;
	width:200rem;
	height: 300rem;
}
.proshow .titbox{
	width: 100%;
	font-size: 20rem;
	display: flex;
	margin-bottom: 0rem;
	position: relative;
	padding-left: 10rem;
	border-left: 8rem #e60212 solid;
	z-index: 10;
}
.proshow .titbox .tit{
	font-weight: bold;
}
.proshow .typebox{
	width: 100%;
	font-weight: bold;
	padding: 10rem 10rem 10rem;
	margin: 10rem;
	display: block;
	position:relative;
	overflow:hidden;
	z-index: 10;
}
.proshow .typebox p{
	position:relative;
	font-size: 16rem;
	transition: 0.3s linear;
}
.proshow .typebox:after{
	width: 80%;
	height: 1rem;
	position:absolute;
	background: #0000004d;
	content:'';
	bottom:0;
	left:0;
}
.proshow .typebox:before{
	width: 80%;
	height:100%;
	position:absolute;
	background: #e60211;
	content:'';
	bottom:0;
	left:-100%;
	transition:0.3s linear;
}
.proshow .typebox:hover{
	color:#fff;
}
.proshow .typebox:hover:before{
	left:0;
}
/* areabox */
.areabox .main-box{
	width: 100%;
	height: auto;
	margin-bottom: 50rem;
}
.areabox .container-title{
	width: 100%;
}
.areashow{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transition: 0.3s ease-out;
	margin-top:20rem;
	flex-wrap: wrap;
}
.areashow .showbox{
	width: 100%;
	height: 100%;
	position: relative;
}
.areashow .showbox>.pic-box{
	height: 180rem;
	width: 100%;
}
.areashow .showbox>.pic-box img{
}
.areashow .showbox .textbox{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	top:0;
	left: 0;
	justify-content: center;
	align-items: center;
	padding: 0 5rem;
	color: #fff;
	text-align: center;
	flex-direction: column;
	background: linear-gradient(45deg, #000000c4, transparent);
}
.areashow .showbox .textbox .pic-box{
	width: 60rem;
	margin-bottom: 10rem;
}
.areashow .showbox .textbox .titbox{
	padding-bottom: 10rem;
	border-bottom: 2rem #fff0 solid;
	width: 100%;
}
.areashow .showbox .textbox .cn{
	font-size: 18rem;
	margin-bottom: 5rem;
	font-weight: bold;
	letter-spacing: 0;
}
.areashow .showbox .textbox .en{
	font-size: 13rem;
	word-break: initial;
}
.areashow .showbox .textbox .intro{
	font-size: 14rem;
	margin-top: 10rem;
	display: none;
}
.areashow:hover .showbox{
	width: 100%;
}
.areashow .showbox:hover{
	width: 100%;
}
.areashow .showbox:hover .textbox{
	background: #3a4958a6;
}
.areashow .showbox:hover .textbox .intro{
	display:block;
}
.areashow .showbox:hover>.pic-box img{
	transform:scale(1.2)
}
.areashow .showbox:hover .textbox .titbox{
	border-bottom: 2rem #fff solid;
}
footer{
	width: 100%;
	background: #1d2088;
	/* color:#fff; */
	border-top: 2rem #3131316b solid;
	padding-top: 40rem;
	background: #fff;
	overflow: hidden;
}
footer .footer{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	flex-direction: column;
}
footer .left{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	position: relative;
	justify-content: space-between;
}
.flogo{
	background: #fff;
	border-radius: 10rem;
	width: 200rem;
}
.fcontact{
	width: 100%;
	line-height: 30rem;
	font-size: 15rem;
	margin-top: 10rem;
}
.fewm{
	text-align:center;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
}
.fewm p{
	font-size: 15rem;
	width: auto;
}
.fewm img{
	width: 100rem;
	height: auto;
}
.fcontact span{
	font-weight: bold;
}
.footnav{
	width: 40%;
	justify-content: space-around;
	text-align: center;
	display: flex;
	border-right: 1rem #3131316b solid;
	border-left: 1rem #3131316b solid;
}
.footnav>li{
	font-size:18rem;
	font-weight: bold;
	width: 20%;
}
.footnav li ul{
	font-size:16rem;
	opacity:0.8;
	margin-top:10rem;
	line-height:30rem
}
footer .right{
	display: flex;
	width: 100%;
	font-size: 16rem;
	height: 380rem;
	margin-top: 30rem;
}
footer .right .fnews{
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
footer .right .fnews .showbox{
	display:flex;
	width: 47%;
	transition: 0.5s ease;
	position:relative;
	flex-direction: column;
	align-items: flex-start;
}
footer .right .fnews .showbox:hover{
	color: #e60212;
	transform: translateY(-5rem);
}
footer .right .fnews .showbox:before{
	content:'';
	position:absolute;
	bottom:-1rem;
	height:1rem;
	width:0%;
	background:#e60212;
	transition:0.5s ease;
}
footer .right .fnews .showbox:hover:before{
	width:100%;
}
footer .right .fnews .showbox .tit{
	width: 90%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-align: left;
}
footer .right .fnews .showbox .date{
	width: auto;
	text-align: right;
}
footer .right .showbox{
	font-size: 14rem;
	line-height: 25rem;
	white-space: nowrap;
	margin-bottom: 10rem;
}
footer .right .showbox .pic-box{
	width: 100%;
}
footer .bottom{
	width: 100%;
	padding: 10rem 0;
	border-top: 1rem #3131316b solid;
	margin-top: 10rem;
	font-size: 14rem;
	text-align: center;
}
footer .bottom span{
	display: inline-block;
	margin: 0 10rem;
}
.m-head{
	    display: flex;
	    position:fixed;
	    height:60rem;
	    width: 100%;
	    padding: 5rem 20rem;
	    justify-content: space-between;
	    align-items: center;
	    z-index:999;
	    top: 0;
	    background: #fff;
	    box-shadow: 5rem 0 30rem #808080;
}
.m-head .m-logo{
	width: 250rem;
	height: 100%;
	border-radius: 5rem;
	padding: 5rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.m-head .m-logo .text-box{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.m-head .m-logo .text-box p:nth-child(1){
	color: #000000;
	font-size: 19rem;
	text-align: center;
	/* text-shadow: 2rem 2rem 3rem #000000; */
}
.m-head .m-logo .text-box p:nth-child(2){
	font-weight:bold;
	font-size:10rem;
}
.m-head .m-logo img{
	height: 100%;
	width: auto;
}


.m-head .list-button{
	height: 80%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.m-head .list-button .mlangchange{
	width:30rem;
	height:100%;
	position:relative;
	margin-right: 20rem;
	line-height: 40rem;
}
.m-head .list-button .mlangchange .pic-box{
	height:100%;
}
.m-head .list-button .mlangchange .showbox{
	display:none;
	transition: unset;
	width: 300%;
	height: auto;
	position: absolute;
	background: #fff;
	font-size: 20rem;
	color: #fff;
	text-align: center;
	right: -100%;
	line-height: 40rem;
}
.m-head .list-button .mlangchange .showbox a{
	display:inline-block;
	width:100%;
	border-top: 1rem #ffffff52 solid;
}
.m-head .list-button .linebox{
	display:flex;
	width:30rem;
	height:100%;
	flex-direction: column;
	justify-content: center;
}
.m-head .list-button .line{
	width:100%;
	height:2rem;
	background: #000;
	margin: 3rem 0;
}
.m-top-menu{
	position:fixed!important;
	background: #bbbbbb75;
	height:100%;
	width:100%;
	padding-top:60rem;
	left:0;
	top:0;
	z-index:999;
	display: none;
}
.m-top-menu .left{
	position:absolute;
	top:0;
	height: 100%;
	width: 100%;
	left:0;
}

.m-top-menu>ul{
	width:40%;
	height:100%;
	background: #fff;
	color: #000;
	text-align: center;
	font-size: 15rem;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	position: absolute;
	right: -40%;
}
.m-top-menu>ul a{
}

.m-top-menu>ul>li{
	width:100%;
	height: auto;
	margin: 10rem;
}


.m-top-menu>ul>li>ul{
	display:none;
}

.m-top-menu>ul>li:hover ul{
	display: block;
}

.m-top-menu>ul>li>ul{
	margin-top:15rem;
	margin-bottom: 30rem;
}
.m-top-menu>ul>li>ul>a{
	display:block;
	margin: 15rem 0;
	color: #858585;
}
/* m-footer css */
.m-footbut{
	width:100%;
	height:60rem;
}

.m-footbut .navwrapper{
	width:100%;
	height:60rem;
	position:fixed;
	bottom:0;
	background: #fff;
	display:flex;
	justify-content:space-between;
	z-index: 9999;
	padding: 2rem 10rem;
	border-top: 1rem #00000045 solid;
}

.m-footbut .navwrapper .navbox{
	width:32%;
	display:flex;
	flex-direction: column;
	color: #000;
	align-items: center;
	justify-content: space-between;
	border-right: 1rem #ffffff57 solid;
	font-size: 14rem;
}
.m-footbut .navwrapper .navbox:nth-child(4){
	border:none;
}
.m-footbut .navwrapper .navbox .pic-box{
	width: 30%;
	margin: 5rem 0rem;
	filter: brightness(0);
}